<template>
  <div class="p_aside_view">
    <div class="aside_view_header horizontalFlex verticalFlex">
      <span class="keyWord">N</span>
      <transition name="el-zoom-in-center">
        <span v-show="!(!state.isMobile && state.isUnfold)">avigation</span>
      </transition>
      <span class="keyWord">P</span>
      <transition name="el-zoom-in-center">
        <span v-show="!(!state.isMobile && state.isUnfold)">age</span>
      </transition>
    </div>
    <el-scrollbar>
    <el-menu
        :default-active="menu.active"
        class="el-menu-vertical-demo"
        :collapse="!state.isMobile && state.isUnfold"
        @select="handleSelectMenu"
    >
        <el-menu-item v-for="menu in menu.menuList" :key="menu.router" :index="`menu${menu.router}`">
          <el-icon><Flag /></el-icon>
          <template #title>{{ menu.label }}</template>
        </el-menu-item>
    </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { Flag } from '@element-plus/icons-vue';
import { getSiteData } from "@/assets/js/mock";
import { reactive } from "vue";
import { useStore } from "vuex";
let store = useStore();
let state = store.state;

const menu = reactive({
  // menuList: [
  //   { icon: 'thumbs-up-outline', label: '热门导航', router: 'a' },
  //   { icon: 'moon-outline', label: '热门导航', router: 'b' },
  //   { icon: 'bookmark-outline', label: '热门导航', router: 'c' }
  // ],
  menuList: getSiteData().map(m => ({ label: m.menuName, router: m.menuId })),
  active: 'a'
});
const handleSelectMenu = (index: string) => {
  // console.log(index)
  const dom = document.querySelector(`#${index}`);
  dom && dom.scrollIntoView({
    behavior: "smooth",  // 平滑过渡
    block:    "start"  // 上边框与视窗顶部平齐。默认值
  });
};
</script>

<style scoped lang="scss">
.p_aside_view{
  width: 100%;
  height: 100%;
  --aside_view_bg: rgba(48, 65, 86, 0.9);
  --aside_view_text_color: rgba(255,255,255,.8);
  background-color: var(--aside_view_bg);
  color: var(--aside_view_text_color);
  position: relative;
  padding-top: 60px;
  overflow: hidden;
  .aside_view_header{
    position: absolute;
    top: 0;
    height: 60px;
    width: 100%;
    cursor: pointer;
    transition: color .3s;
    user-select: none;
    &:hover{
      color: #F99A00;
    }
    .keyWord{
      color: #F99A00;
    }
  }
  .el-menu-vertical-demo{
    --el-fill-color-blank: transparentize;
    --el-menu-text-color: var(--aside_view_text_color);
    --el-menu-hover-bg-color: rgba(48, 65, 86, 1);
    border-right: 0;
    height: 100%;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse){
    width: 200px;
  }
}
</style>